<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goCashDepositDetail"
    ></topTitle>
    <div class="mainCon" id="niceScroll">
      <el-form
        :model="formData"
        label-width="122px"
        :rules="formRules"
        ref="formData"
        class="form"
      >
        <el-row class="row-padding-bottom">
          <el-col :span="24" class="col-position">
            <el-form-item label="项目名称" prop="projectId">
              {{ formData.projectName || '--' }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-padding-bottom">
          <el-col :span="24" class="col-position">
            <el-form-item label="缴纳单位" prop="reciveunit">
              <el-radio-group v-model="formData.reciveunit">
                <el-radio
                  v-for="(item, index) in companyOptions"
                  :key="index"
                  :label="item.companyType"
                  >{{ item.companyName }}({{
                    item.companyType == '5' ? '施工方' : '建设方'
                  }})</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-padding-bottom">
          <el-col :span="24" class="col-position">
            <el-form-item label="缴纳日期" prop="operationDate">
              <el-date-picker
                type="date"
                placeholder="请选择保证金缴纳的日期"
                v-model="formData.operationDate"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-padding-bottom">
          <el-col :span="24" class="col-position">
            <el-form-item label="缴纳方式">
              <span class="shouldTotal">{{ formData.method || '--' }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-padding-bottom">
          <el-col :span="24" class="col-position">
            <el-form-item label="应缴金额">
              <p class="shouldTotal">
                <span>{{ formData.shouldPayTotal }}</span
                >元&nbsp;( <span>{{ formData.projectTotal }}</span
                >&nbsp;* <span>{{ formData.payScale }}</span
                >%&nbsp;,&nbsp;最高限额 <span>{{ formData.upperLimit }}</span
                >元&nbsp;)
              </p>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-padding-bottom">
          <el-col :span="24" class="col-position">
            <el-form-item label="担保金额" prop="payTotal">
              <el-input
                style="position: relative"
                v-model.trim="formData.payTotal"
                placeholder="请输入担保金额"
              ></el-input>
              <span style="position: absolute; left: 350px">元</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-padding-bottom">
          <el-col :span="24" class="col-position">
            <el-form-item label="担保机构" prop="guaranteeName">
              <el-input
                maxlength="200"
                v-model.trim="formData.guaranteeName"
                placeholder="请填写担保机构全称"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-padding-bottom">
          <el-col :span="24" class="col-position">
            <el-form-item label="担保生效日" prop="guaranteeStartDate">
              <el-date-picker
                type="date"
                placeholder="请选择保函/担保开立的日期"
                v-model="formData.guaranteeStartDate"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-padding-bottom">
          <el-col :span="24" class="col-position">
            <el-form-item label="担保到期日" prop="guaranteeEndDate">
              <el-date-picker
                type="date"
                placeholder="请选择保函/担保失效的日期"
                v-model="formData.guaranteeEndDate"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-padding-bottom">
          <el-col :span="24" class="col-position">
            <el-form-item label="业务办理人">
              <el-input
                maxlength="200"
                v-model.trim="formData.operator"
                placeholder="请填写业务实际处理人员姓名"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-padding-bottom">
          <el-col :span="24" class="col-position">
            <el-form-item label="缴纳原因" prop="remark">
              <el-input
                maxlength="200"
                v-model.trim="formData.remark"
                placeholder="请填写缴纳备注信息"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-padding-bottom">
          <el-col :span="24" class="col-position">
            <el-form-item label="缴纳凭证">
              <uploadAnnex
                @getFileList="getFileList"
                :limitationFactor="limitationFactor"
                @getFile="getFile"
                :upLoadFile="upLoadFile"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" v-model="formData.contractImgUrl">
            <elementImage
              :upLoadFile="upLoadFile"
              :srcList="srcList"
              :oldSrcList="oldSrcList"
              @changeSrcList="changeSrcList"
            ></elementImage>
          </el-col>
        </el-row>
        <el-row class="row-padding-bottom operateBtns">
          <el-col :span="24" class="col-position">
            <el-form-item>
              <el-button
                class="commonBut saveBtn"
                @click="saveToDetail"
                :loading="isSaveLoading"
                >保存</el-button
              >
              <el-button class="commonBut" @click="goCashDepositDetail"
                >取消</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import common from '../../kits/common'

export default {
  name: 'cashDepositEdit',

  data() {
    var checkDate = (rule, value, callback) => {
      var guaranteeStartDate = this.formData.guaranteeStartDate
      var guaranteeEndDate = this.formData.guaranteeEndDate
      if (!guaranteeEndDate) {
        return callback(new Error('保函/担保到期的日期不能为空'))
      } else if (guaranteeStartDate > guaranteeEndDate) {
        return callback(new Error('担保到期日不能小于担保生效日'))
      } else {
        callback()
      }
    }
    var checkMoney = (rule, value, callback) => {
      var payTotal = this.formData.payTotal
      if (!payTotal) {
        return callback(new Error('金额不能为空'))
      } else {
        var rePayTotal =
          /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/
        if (!rePayTotal.test(value) || payTotal == 0.0 || payTotal == 0.0) {
          callback(new Error('金额格式不正确,必须大于0,最多带有2位小数'))
        } else {
          if (payTotal >= 100000000000) {
            callback(new Error('金额需小于1000亿'))
          } else {
            callback()
          }
        }
      }
    }
    return {
      limitationFactor: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传文件最大数量设置
        fileSize: 2, //自定义上传文件最大设置
        messagetip: '要求格式为JPG、PNG格式，图片大小不超过2M', //自定义报错提示语
        formatType: 'typeOne', //自定义上传格式校验类型
        fileId: 'salaryExcel', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'salaryExcelForm', //自定义id解决一个页面包含多个上传附件
        methodTip:
          '请上传银行保函单照片，要求格式为JPG、PNG格式，图片大小不超过2M。', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
      },
      show: false,
      titleText: '修改保证金',
      back: true,
      formData: {
        projectName: '',
        companyName: '',
        operationDate: '',
        method: '',
        reciveunit: '', //缴纳单位
        payTotal: '', //担保金额
        shouldPayTotal: '', //应缴金额
        projectTotal: '', //工程造价
        payScale: '', //工程造价比例
        upperLimit: '', //最高限额
        guaranteeName: '',
        guaranteeStartDate: '',
        guaranteeEndDate: '',
        operator: '',
        remark: '',
        status: '',
      },
      upLoadFile: [], //附件
      cardFile: [],
      srcList: [],
      oldSrcList: [],
      cashDepositId: '',
      companyOptions: [], //缴纳单位
      //验证
      formRules: {
        reciveunit: [
          {
            required: true,
            message: '请选择缴纳单位',
            trigger: 'change',
          },
        ],
        operationDate: [
          {
            required: true,
            message: '缴纳日期不能为空',
            trigger: 'change',
          },
        ],
        bank: [
          {
            required: true,
            message: '请选择缴纳银行',
            trigger: 'change',
          },
        ],
        payTotal: [
          {
            required: true,
            validator: checkMoney,
            trigger: 'blur',
          },
        ],
        guaranteeName: [
          {
            required: true,
            message: '担保机构不能为空',
            trigger: 'change',
          },
        ],
        guaranteeStartDate: [
          {
            required: true,
            message: '保函/担保开立的日期不能为空',
            trigger: 'change',
          },
        ],
        guaranteeEndDate: [
          {
            required: true,
            validator: checkDate,
            // message: "保函/担保到期的日期不能为空",
            trigger: 'change',
          },
        ],
      },
      isSaveLoading: false, // 保存loading
    }
  },
  created() {
    this.cashDepositId = this.$route.query.cashDepositId
    //获取详情数据
    this.getCashDepositInfo()
  },
  mounted() {
    // $("#niceScroll").niceScroll({
    //     cursorwidth: "10px",
    //     cursoropacitymax: 0.5
    // });
  },
  methods: {
    /**
     * @description: 获取上传的附件
     */
    getFileList(val) {
      this.oldSrcList.push(val)
      this.srcList.push(val)
    },
    /**
     * @description: 获取上传的附件
     */
    getFile(val) {
      this.upLoadFile = val
    },
    getCashDepositInfo() {
      this.axios({
        method: 'post',
        url: 'api-d/deposit/expand/detail',
        data: {
          id: this.cashDepositId,
        },
      })
        .then((response) => {
          var data = response.data.result
          this.formData.projectName = data.projectName
          this.formData.companyName = data.companyName
          this.formData.operationDate = data.operationDate
          this.formData.method = data.methodDesc
          this.formData.shouldPayTotal = data.shouldPayTotal || '0'
          this.formData.projectTotal = data.projectTotal || '0'
          this.formData.payTotal = data.payTotal || '0'
          this.formData.upperLimit = data.upperLimit || '0'
          this.formData.payScale = data.payScale || '0'
          this.formData.guaranteeName = data.guaranteeName
          this.formData.guaranteeStartDate = data.guaranteeStartDate
          this.formData.guaranteeEndDate = data.guaranteeEndDate
          this.formData.operator = data.operator
          this.formData.remark = data.remark
          //状态标志图片
          this.status = data.status
          this.upLoadFile = data.file
          for (var i = 0; i < this.upLoadFile.length; i++) {
            this.srcList.push(this.upLoadFile[i].url)
            this.oldSrcList.push(this.upLoadFile[i].url)
          }
          this.companyOptions.push(
            {
              companyName: data.ownerName,
              companyType: '0', //建设方
              uscc: data.ownerUscc,
              companyId: data.ownerId,
            },
            {
              companyName: data.contractorName,
              companyType: '5', //施工方
              uscc: data.contractorUscc,
              companyId: data.contractorId,
            }
          )
          this.formData.reciveunit = data.companyType
        })
        .catch((error) => {})
    },
    //保存跳转到详情
    saveToDetail() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.isSaveLoading = true
          this.submitFormUptate()
        } else {
          return false
        }
      })
    },
    submitFormUptate(params) {
      var companyName
      var companyId
      var uscc
      if (this.formData.reciveunit === '0') {
        //建设方
        companyName = this.companyOptions[0].companyName
        companyId = this.companyOptions[0].companyId
        uscc = this.companyOptions[0].uscc
        this.formData.reciveunit = '0'
      } else {
        companyName = this.companyOptions[1].companyName
        companyId = this.companyOptions[1].companyId
        uscc = this.companyOptions[1].uscc
        this.formData.reciveunit = '5'
      }
      var data = {
        id: this.cashDepositId,
        companyName: companyName,
        companyId: companyId,
        uscc: uscc,
        companyType: this.formData.reciveunit,
        operationDate: this.formData.operationDate,
        payTotal: this.formData.payTotal,
        guaranteeName: this.formData.guaranteeName,
        guaranteeStartDate: this.formData.guaranteeStartDate,
        guaranteeEndDate: this.formData.guaranteeEndDate,
        operator: this.formData.operator,
        remark: this.formData.remark,
        fileJson: JSON.stringify(this.upLoadFile),
      }
      this.axios({
        method: 'post',
        url: 'api-d/deposit/expand/updatedeposit',
        data: data,
      })
        .then((response) => {
          this.isSaveLoading = false
          if (!response.data.hasError) {
            this.$message({
              message: '保存成功',
              type: 'success',
            })
            this.goCashDepositDetail()
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
            this.isSaveLoading = false
          }
        })
        .catch((error) => {
          this.$message.error('保存失败')
          this.isSaveLoading = false
        })
    },
    //取消返回列表
    goCashDepositDetail() {
      this.$router.push({
        path: '/home/cashDeposit/cashDepositDetail/',
        name: 'cashDepositDetail',
        query: {
          cashDepositId: this.cashDepositId,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/cashDeposit/cashDepositList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },

    /**
     * @description: 改变图片地址
     */
    changeSrcList(val) {
      this.srcList = val
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  top: 198px;
  /deep/ .el-form {
    padding: 50px 60px;
    .el-input__inner {
      width: 340px;
    }
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 340px;
  }
  .shouldTotal {
    color: #009588;
    font-weight: bold;
  }
  .uploadBox {
    position: relative;
    .uploadImg {
      width: 96px;
      height: 36px;
      color: #009588;
      border: 1px solid #009588;
      line-height: 10px;
    }
    .uploadImgState {
      font-size: 14px;
      color: #999999;
      margin-left: 12px;
    }
    .upLoadDom {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      input {
        width: 100px;
        height: 36px;
        cursor: pointer;
      }
    }
  }
  .imgStyle {
    padding-left: 120px;
    li {
      position: relative;
      margin-right: 20px;
      // margin-top: 10px;
      i {
        position: absolute;
        right: -6px;
        top: -10px;
        font-size: 20px;
      }
    }
  }
  .operateBtns {
    margin-top: 30px;
  }
}
</style>
